<!-- 融资申请管理 -->
<template>
  <div class="app-container">
    <el-tabs v-model="tabNum" style="background:#fff;padding-left:10px;">
      <el-tab-pane
        label="待审批"
        name="1"
      >
        <avue-crud
          ref="crud1"
          :option="option_1"
          :data="data_1"
          :table-loading="loading_1"
          :page.sync="page_1"
          @on-load="onLoad_1"
          @search-change="searchChange_1"
          @search-reset="resetChange"
          :search.sync="search_1"
        >
          <template
            slot="menu"
            slot-scope="scope"
          >
            <el-button
              size="small"
              type="text"
              @click="verify(scope.row)"
              icon="el-icon-document-checked"
            >审核</el-button>
          </template>
        </avue-crud>
      </el-tab-pane>
      <el-tab-pane
        label="已审批"
        name="2"
      >
        <avue-crud
          ref="crud2"
          :option="option_2"
          :data="data_2"
          :table-loading="loading_2"
          :page.sync="page_2"
          @on-load="onLoad_2"
          @search-change="searchChange_2"
          @search-reset="resetChange"
          :search.sync="search_2"
        >
          <template
            slot="menu"
            slot-scope="scope"
          >
            <el-button
              size="small"
              type="text"
              @click="viewOpen(scope.row)"
              icon="el-icon-document-checked"
            >查看</el-button>
            <el-button
              size="small"
              type="text"
              @click="pay(scope.row)"
              icon="el-icon-top"
              v-if="scope.row.RZZT == 5"
            >付款</el-button>
          </template>
        </avue-crud>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      :title="dialogTitle"
      class="avue-dialog"
      :visible.sync="dialogVisble"
      width="60%"
      center
    >
      <el-steps
        :active="stepActive"
        v-if="dialogType === 'pay' || dialogType === 'view'"
      >
        <el-step
          v-for="(i,index) in stepList"
          :key="index"
          :title="i.text"
        ></el-step>
      </el-steps>
      <simpleTable :Data="simpleTableData"></simpleTable>
      <el-tabs v-if="dialogType === 'verify'">
        <el-tab-pane label="融资审核结果">
          <el-form
            :model="verifyData"
            ref="verifyForm"
          >
            <el-form-item
              label=""
              prop="verifyResult"
            >
              <el-radio-group v-model="verifyData.verifyResult">
                <el-radio :label="3">通过</el-radio>
                <el-radio :label="6">拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="备注"
              prop="remark"
              v-if="verifyData.verifyResult == 6"
              :rules="[{ required: true, message: '请输入拒绝原因', trigger: 'blur' }]"
            >
              <el-input
                type="textarea"
                v-model="verifyData.remark"
              ></el-input>
            </el-form-item>
          </el-form>

        </el-tab-pane>
      </el-tabs>

      <el-tabs v-if="dialogType === 'pay'">
        <el-tab-pane label="填写放款信息">
          <el-form
            :model="payData"
            ref="payForm"
            label-width="120px"
          >
            <el-form-item
              label="金融产品名称"
              prop="fkcp"
              :rules="[{ required: true, message: '请输入金融产品名称', trigger: 'blur' }]"
            >
              <el-input v-model="payData.fkcp"></el-input>
            </el-form-item>
            <el-form-item
              label="放款金额(万元)"
              prop="fkje"
              :rules="[{ required: true, message: '请输入金融放款金额', trigger: 'blur' }]"
            >
              <el-input v-model="payData.fkje"></el-input>
            </el-form-item>
            <el-form-item
              label="放款时间"
              prop="fkrq"
              :rules="[{ required: true, message: '请输入放款时间', trigger: 'blur' }]"
            >
              <el-date-picker
                v-model="payData.fkrq"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              > </el-date-picker>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <el-tabs v-if="dialogType === 'view'">
        <el-tab-pane label="操作记录">
          <el-table
            :data="viewTableData"
            border
          >
            <el-table-column
              prop="operator"
              label="操作人"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="rzzt"
              label="操作结果"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="时间"
              align="center"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div class="dialog-footer">
        <el-button
          type="primary"
          v-if="dialogType === 'verify'"
          @click="verifySave"
          round
        >保存</el-button>
        <el-button
          type="primary"
          v-if="dialogType === 'pay'"
          @click="paySave"
          round
        >保存</el-button>
        <el-button
          @click="dialogVisble = false"
          type="primary"
          plain
          round
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  jrRefuse,
  jrPass,
  getPCQyrzList,
  getJrIsRzApprove,
  getLiuc,
  jrOver,
} from '@/api/manager.js'
import simpleTable from './components/simpleTable.vue'
import {
  qyRzStatusDic,
  activeList,
  createTableData_orgFinanceApply_verify,
  createTableData_orgFinanceApply_view,
  createStepList,
} from './finance.util'

const _option = {
  headerAlign: 'center',
  align: 'center',
  border: true,
  index: true,
  indexLabel: '序号',
  indexWidth: 100,
  card: true,
  labelWidth: 135,
  delBtn: false,
  editBtn: false,
  excelBtn: true,
  selection: false,
  searchLabelWidth: '25%',
  searchSpan: 6,
  searchMenuSpan: 4,
  columnBtn: false,
  refreshBtn: false,
  selectClearBtn: false,
  addBtn: false,
  searchShowBtn: false,
  column: [
    {
      label: '企业名称',
      prop: 'qymc',
      search: true,
      order: 10,
      width: '350',
    },
    {
      label: '统一社会信用代码',
      prop: 'tyshxydm',
      order: 11,
    },
    {
      label: '法人姓名',
      prop: 'frxm',
      order: 12,
    },
    {
      label: '认证发起人',
      prop: 'name',
      search: true,
      order: 12,
    },
    {
      label: '创建时间',
      prop: 'create_time',
      order: 21,
    },
  ],
}

export default {
  components: {
    simpleTable,
  },
  data() {
    return {
      tabNum: '1',
      loading_1: false,
      loading_2: false,
      page_1: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      page_2: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      data_1: [],
      data_2: [],
      option_1: {},
      option_2: {},
      search_1: {
        //productName:'awd'
      },
      search_2: {},
      dialogTitle: '审核',
      dialogVisble: false,
      simpleTableData: [],
      dialogType: 'verify',
      verifyData: {
        verifyResult: 3,
        remark: '',
      },
      payData: {
        fkcp: '',
        fkje: '',
        fkrq: '',
      },
      stepActive: '',
      stepList: [],
      viewTableData: [],
    }
  },
  created() {
    const { column } = _option
    const rzztDicData = Object.keys(qyRzStatusDic).map((i) => {
      return {
        label: qyRzStatusDic[i],
        value: Number(i),
      }
    })
    //console.log('rzztDicData',rzztDicData)
    this.option_1 = {
      ..._option,
      column: [
        ...column,
        {
          label: '日期范围',
          prop: 'daterange',
          search: true,
          hide: true,
          searchRange: true,
          type: 'daterange',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
        },
      ],
    }
    this.option_2 = {
      ..._option,
      column: [
        ...column,
        {
          label: '认证状态',
          prop: 'rzstatus',
          search: true,
          type: 'select',
          order: 20,
          dicData: rzztDicData,
        },
      ],
    }
    //获取担保方式
    // getField({
    //     page:1,
    //     size:1000,
    //     code:'guarantee_type'
    // }).then(res => {
    //     console.log('guarantee_type',res.data.records)
    //     const options = [{label:'不限',value:'all'},...res.data.records.map(item => { return {label:item.fieldName,value:item.fieldCode}})];
    //     this.option.group[0].column.find(item => item.prop == 'infoDbfs').dicData = options;
    // });
    // //获取适用区域
    // getField({
    //     page:1,
    //     size:1000,
    //     code:'NTAREA'
    // }).then(res => {
    //     console.log('NTAREA',res.data.records)
    //     const options = [{label:'不限',value:'all'},...res.data.records.map(item => { return {label:item.fieldName,value:item.fieldCode}})];
    //     this.option.group[0].column.find(item => item.prop == 'infoArea').dicData = options;
    // });
  },
  computed: {
    headers() {
      return {
        TOKEN: this.$store.getters.token,
      }
    },
  },
  filters: {
    // filterQylx(val,qylxList){
    // }
  },
  methods: {
    onLoad_1() {
      console.log('NTAREA', this.search_1)
      const { daterange } = this.search_1
      const params = {
        ...this.search_1,
        startYmd: daterange ? daterange[0] : '',
        endYmd: daterange ? daterange[1] : '',
        pageNum: this.page_1.currentPage,
        pageSize: this.page_1.pageSize,
      }
      this.loading_1 = true
      getPCQyrzList(params).then((data) => {
        console.log('data', data)
        if (data.status) {
          this.loading_1 = false
          this.data_1 = data.data.records
          this.page_1.total = data.data.total
        }
      })
    },
    onLoad_2() {
      const params = {
        ...this.search_2,
        pageNum: this.page_2.currentPage,
        pageSize: this.page_2.pageSize,
      }
      this.loading_2 = true
      getJrIsRzApprove(params).then((data) => {
        if (data.status) {
          this.loading_2 = false
          this.data_2 = data.data.records
          this.page_2.total = data.data.total
        }
      })
    },
    /* 清空 */
    resetChange() {
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.onLoad()
    },
    /* 搜索筛选 */
    searchChange_1(params, done) {
      done()
      this.page_1.currentPage = 1
      this.page_1.pageSize = 10
      this.onLoad_1()
    },
    searchChange_2(params, done) {
      done()
      this.page_2.currentPage = 1
      this.page_2.pageSize = 10
      this.onLoad_2()
    },
    verify(row) {
      this.simpleTableData = createTableData_orgFinanceApply_verify(row)
      this.currentRow = row
      this.dialogType = 'verify'
      this.dialogVisble = true
    },
    verifySave() {
      this.$refs['verifyForm'].validate((valid) => {
        if (valid) {
          const { id } = this.currentRow
          const { verifyResult, remark } = this.verifyData //jrPass
          if (verifyResult === 3) {
            jrPass({ id }).then((res) => {
              //console.log('jrRefuse',res)
              if (res.status) {
                this.$message({
                  type: 'success',
                  message: res.msg,
                })
              } else {
                this.$message({
                  type: 'error',
                  message: res.msg,
                })
              }
              this.dialogVisble = false
            })
          } else {
            jrRefuse({ id, remark }).then((res) => {
              //console.log('jrRefuse',res)
              if (res.status) {
                this.$message({
                  type: 'success',
                  message: res.msg,
                })
              } else {
                this.$message({
                  type: 'error',
                  message: res.msg,
                })
              }
              this.dialogVisble = false
            })
          }
        }
      })
    },
    paySave() {
      this.$refs['payForm'].validate((valid) => {
        if (valid) {
          const { id } = this.currentRow
          const { fkje, fkrq, fkcp } = this.payData
          const params = {
            id,
            fkje,
            fkrq,
            fkcp,
          }
          jrOver(params).then((res) => {
            //console.log('jrRefuse',res)
            if (res.status) {
              this.$message({
                type: 'success',
                message: res.msg,
              })
            } else {
              this.$message({
                type: 'error',
                message: res.msg,
              })
            }
            this.dialogVisble = false
          })
        }
      })
    },
    //查看
    viewOpen(row) {
      const { id, RZZT } = row
      getLiuc({ id }).then((res) => {
        console.log('getLiuc', res)
        if (res.status) {
          this.viewTableData = res.data.map((i) => {
            return {
              ...i,
              rzzt: rzztDic[i.rzzt],
            }
          })
          this.dialogTitle = '查看详情'
          this.simpleTableData = createTableData_orgFinanceApply_view(row)
          this.currentRow = row
          this.stepList = createStepList().filter((i) => i.show.includes(RZZT))
          this.stepActive = activeList[RZZT]
          this.dialogType = 'view'
          this.dialogVisble = true
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          })
        }
      })
    },

    pay(row) {
      const { RZZT } = row
      this.simpleTableData = createTableData_orgFinanceApply_verify(row)
      this.currentRow = row
      this.dialogTitle = '填写放款信息'
      this.dialogType = 'pay'
      this.stepActive = activeList[RZZT]
      this.dialogVisble = true
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
/deep/ .avue-crud__pagination {
  text-align: center;
}
.dialog-footer {
  text-align: center;
  margin: 20px auto;
}
</style>
